import { createApp } from 'vue'
// import './style.css'
import naive from 'naive-ui'
import App from './App.vue'
import store from './store'
import { router } from '@/router/index'
import cookies from './utils/cookieTool'
import { ref } from 'vue'
import myA from '@/components/polarisA.vue'
import emoji from '@/components/emoji.vue'
import useWebSocket from "@/utils/websocket";
import { config } from 'md-editor-v3';
import LinkAttr from 'markdown-it-link-attributes';
import cardLink from '@/utils/linkcard.js'
import { observeAnchors, getAllAnchors } from '@/utils/getAllAnchors.js'


//md-editor-v3配置外部打开链接
config({
    markdownItPlugins(plugins) {
        const filteredPlugins = plugins.filter((p) => p.type !== 'xss');
        return [
            // ...plugins,
            ...filteredPlugins,
            {
                type: 'linkAttr',
                plugin: LinkAttr,
                options: {
                    matcher(href: string) {
                        // 如果使用了markdown-it-anchor
                        // 应该忽略标题头部的锚点链接
                        return !href.startsWith('#');
                    },
                    attrs: {
                        target: '_blank'
                    }
                }
            },
        ];
        return plugins.filter((p) => p.type !== 'xss');
    }
});
const wsOptions = {
    url: "ws://192.168.50.243:9527/polaris",
};

const app = createApp(App)
app.config.globalProperties.$cookies = cookies;
app.config.globalProperties.$wsService = useWebSocket(wsOptions);

let tableHeight = ref(window.innerHeight - 260)
// 监听浏览器窗口变化，动态计算表格高度，
// 225是表格外其它布局占的高度，这个数值根据自己实际情况修改
window.addEventListener('resize', () => {
    tableHeight.value = window.innerHeight - 260
})
// 配置全局变量 页面中使用 inject 接收
app.provide('tableHeight', tableHeight)


// 设置观察器来捕捉新增的 <a> 标签，并调用 getLink 方法
const observer = observeAnchors((anchor) => {
    cardLink(anchor);
});
app.use(naive)
app.use(router);
app.use(store)
app.component('my-a', myA)
app.component('emoji', emoji)
app.mount('#app')
